<template>
	<view class="container">
		<sa-tabs :tabList="topList" @onClickTab="clickTab"></sa-tabs>

		<view class="scroll-view-container" :style="{height:wh + 'px'}">
			<!-- 左侧滑动区 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
				<view :class="['left-scroll-view-item', 0 === active ? 'active':'']" @click="activeChange(0)">全部
				</view>
				<block v-for="(item,i) in goodsTypes" :key="item.id">
					<view :class="['left-scroll-view-item', item.id === active ? 'active':'', item.type == 1 ? '': 'yingxiao']"
						@click="activeChange(item)">
						{{item.name}}
					</view>
				</block>
				<block v-if="saleState == 1">
					<view :class="['left-scroll-view-item', -1 === active ? 'active':'']" @click="activeChange(-1)">
						分类管理>>
					</view>
					<view :class="['left-scroll-view-item', -2 === active ? 'active':'']" @click="activeChange(-2)">
						添加商品>>
					</view>
				</block>


			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y="true" :style="{height:wh + 'px',backgroundColor:'#fff'}" :scroll-top="scorllTop">
				<template v-if="goodsList.length">
					<uni-list>
						<uni-list-item v-for="(item,i) in goodsList" :key="item.id">
							<template v-slot:header>
								<view class="goods-header">
									<uni-icons :type="checkGoods(item) ? 'checkbox-filled' : 'circle'"
										:color="checkGoods(item) ? '#1aad19' : ''  " @click="selectGoods(item.id)"
										size="20"></uni-icons>
									<image :src="goodsImage(item)" class="goods-image" mode="scaleToFill"></image>
								</view>
							</template>
							<template v-slot:body>
								<view class="goods-intro">
									<view class="goods-top">
										<view class="goods-name">{{item.name}}</view>
										<view class="goods-jieshao">{{item.description}}</view>
										<view>库存:{{item.stock}}</view>
									</view>
									<view class="goods-bottom">
										<view class="goods-price">{{priceTransform(item.price)}}/{{item.specification}}</view>
									</view>
								</view>
							</template>
							<template v-slot:footer>
								<view class="goods-opre">
									<button size="mini" class="goods-btn" @click="opeaItem(item)">操作</button>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</template>
				<template v-else>
					<view class="no-info">~~暂无信息~~</view>
				</template>

			</scroll-view>
		</view>

		<!-- 批量操作 -->
		<view v-show="showOpra" class="batch-opa">
			<button class="batch-btn" @click="batchClick">批量操作</button>
		</view>

		<!-- 选择分类 -->
		<uni-popup ref="popup" type="bottom" >

			<uni-section title="请选择分类" type="line" >
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-popup">
					<uni-list>
						<uni-list-item v-for="(cate,i) in goodsTypes" :key="cate.id" clickable @click="cateClick(cate)">
							<template v-slot:body>
								{{cate.name}}({{cate.type == 1 ? "常用分类":"营销分类"}})
							</template>
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</uni-section>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getGoodsList,
		moveGoods,
		upSale,
		downSale,
		deleteBatch
	} from '@/api/shops/goodsManage/goodsManage'
	import {
		getGoodsType,
	} from '@/api/shops/categoryManage/categoryManage.js'
	import {
		transform
	} from '@/minix/mixin.js'
	export default {
		mixins: [transform],
		data() {
			return {
				wh: 0,
				active: 0,
				shopId: '',
				saleState: 1, // 销售状态 默认为销售中
				goodsTypes: [],
				goodsList: [],
				selGoods: [],

				checkedGoods: new Map(),
				selectCateId: '',
				cateType:1,
				selSingleGoods: [],
				opeaMode: 0, // 操作模式，0：单个操作，1：批量操作


				topList: [{
					text: "销售中"
				}, {
					text: "已下架"
				}],

				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				content: [{
						// iconPath: '/static/image.png',
						// selectedIconPath: '/static/image-active.png',
						text: '移组',
						active: false
					},
					{
						// iconPath: '/static/home.png',
						// selectedIconPath: '/static/home-active.png',
						text: '上架',
						active: false
					},
					{
						// iconPath: '/static/star.png',
						// selectedIconPath: '/static/star-active.png',
						text: '删除',
						active: false
					}
				]
			}
		},
		onLoad: function(option) {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight -sysInfo.safeAreaInsets.bottom - 40
			this.shopId = option.shopId
			this.init()
		},
		computed: {
			goodsImage: () => {
				return (item) => {
					return item.multimediaUrl.split(",")[0] || ''
				}
			},
			checkGoods: function(item) {
				return (item) => {
					return this.selGoods.indexOf(item.id) > -1
				}
			},
			showOpra() {
				return this.selGoods.length > 0;
			},
			itemList() {
				if (this.opeaMode == 0) {
					return ['移动分组', `${this.saleState?'下架':'上架'}`, '删除', '编辑'];
				} else {
					return ['移动分组', `${this.saleState?'下架':'上架'}`, '删除'];
				}

			}
		},
		methods: {
			async init() {

				const res = await getGoodsType(this.shopId)
				this.goodsTypes = res

				this.getGoodsListInfo();

			},
			selectGoods(itemId) {
				let selIndex = this.selGoods.indexOf(itemId)

				if (selIndex > -1) {
					this.selGoods.splice(selIndex, 1)
				} else {
					this.selGoods.push(itemId)
				}
			},
			activeChange(index) {
				let _this = this
				if (index == -1) { // 分类管理
					uni.navigateTo({
						url: '/subpkg/shops/categoryManage/categoryManage?shopId=' + this.shopId,
						events: {
							categoryChanged: function(data) {
								if (data) {
									getGoodsType(_this.shopId).then((res) => {
										_this.goodsTypes = res
									})
								}
							}
						}
					})
				} else if (index == -2) { // 添加商品
					uni.navigateTo({
						url: '/subpkg/shops/addGoods/addGoods?shopId=' + this.shopId,
						events: {
							goodsListChange: function(data) {
								if (data) {
									_this.getGoodsListInfo()
								}
							}
						}
					})
				} else {
					
					// 全部商品
					if (index === 0) {
						this.cateType = 1;
						this.active = 0;
						this.selectCateId = ''
					} else {
						this.cateType = index.type;
						this.active = index.id
						this.selectCateId = index.id
					}
					this.getGoodsListInfo()
				}
			},
			getGoodsListInfo() {
				let form = {
					shopId: this.shopId,
					goodsType: this.selectCateId,
					state: this.saleState,
					type : this.cateType
				}
				getGoodsList(form).then((res) => {
					this.goodsList = res

				})
			},

			clickTab(e) {
				// 销售中
				if (e.index == 0) {
					this.saleState = 1
					this.content[1].text = '下架'
				} else {
					this.saleState = 0
					this.content[1].text = '上架'
				}
				this.selGoods = []
				this.getGoodsListInfo();
			},
			opeaItem(item) {
				let _this = this;
				this.opeaMode = 0;
				uni.showActionSheet({
					itemList: _this.itemList,
					success: function(res) {
						// 编辑
						if (res.tapIndex == 3) {
							return uni.navigateTo({
								url: '/subpkg/shops/editGoods/editGoods?shopId=' +
									_this.shopId + '&goodsId=' + item.id,
								events: {
									goodsListChange: function(data) {
										if (data.data) {
											_this.getGoodsListInfo()
										}
									}
								}
							})
						}
						let e = {
							index: res.tapIndex,
							item: {
								text: _this.itemList[res.tapIndex]
							}
						}
						_this.selSingleGoods[0] = item.id
						_this.opeaData(e)
					}
				})
			},
			batchClick(e) {
				if (this.selGoods.size === 0) {
					return uni.showToast({
						title: '请先选择数据'
					})
				}
				let _this = this
				this.opeaMode = 1;
				uni.showActionSheet({
					itemList: _this.itemList,
					success: function(res) {
						let e = {
							index: res.tapIndex,
							item: {
								text: _this.itemList[res.tapIndex]
							}
						}
						_this.opeaData(e)
					}
				})
			},
			opeaData(e) {
				let _this = this;
				// 移动分类
				if (e.index == 0) {
					this.$refs.popup.open('bottom')
				} else if (e.index == 1) {
					if (e.item.text == '上架') {
						// 上架
						uni.showModal({
							title: '确定上架?',
							success(res) {
								if (res.confirm) {
									upSale({
										goodsIds: _this.opeaMode == 0 ? _this.selSingleGoods : _this
											.selGoods
									}).then(rs => {

										uni.showToast({
											title: '上架成功'
										})
										_this.getGoodsListInfo()

									})
								}
							}
						})
					} else {
						// 下架
						uni.showModal({
							title: '确定下架?',
							success(res) {
								if (res.confirm) {
									downSale({
										goodsIds: _this.opeaMode == 0 ? _this.selSingleGoods : _this
											.selGoods
									}).then(rs => {

										uni.showToast({
											title: '下架成功'
										})
										_this.getGoodsListInfo()

									})
								}
							}
						})
					}

				} else {
					// 删除
					uni.showModal({
						title: '确定删除?',
						success(res) {
							if (res.confirm) {
								deleteBatch({
									goodsIds: _this.opeaMode == 0 ? _this.selSingleGoods : _this
										.checkedGoods.values(),
									type:_this.cateType
								}).then(rs => {

									uni.showToast({
										title: '删除成功'
									})
									_this.getGoodsListInfo()

								})
							}
						}
					})
				}
			},
			cateClick(e) {
				let _this = this;
				this.$refs.popup.close()
				uni.showModal({
					content: `确定移到[${e.name}]`,
					success(res) {
						if (res.confirm) {
							moveGoods({
								goodsIds: _this.opeaMode == 0 ? _this.selSingleGoods : _this.selGoods,
								categoryId: e.id,
								type : e.type || 1
							}).then(rs => {

								uni.showToast({
									title: '移动成功'
								})
								_this.getGoodsListInfo()

							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.container {
		.scroll-view-container {
			display: flex;
			overflow: hidden;

			.left-scroll-view {
				width: 120px;

				.left-scroll-view-item {
					background-color: #f7f7f7;
					line-height: 40px;
					text-align: center;
					font-size: 14px;

					&.active {
						background-color: #ffffff;
						position: relative;

						&::before {
							content: ' ';
							display: block;
							width: 2px;
							height: 100%;
							background-color: $base-color;
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);
						}
					}
					
					&.yingxiao{
						color:red;
					}
				}
			}
		}

		.goods-header {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.goods-image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 5px;
		}

		.goods-intro {
			margin-left: 5px;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.goods-top {
				display: flex;
				flex-direction: column;
				flex: 1;

				.goods-name {
					font-size: 14px;
					font-weight: bold;
				}

				.goods-jieshao {
					font-size: 12px;
					color: #a5a099;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					word-break: break-all;
					overflow: hidden;
				}
			}
			.goods-price {}
		}
		
		.goods-opre {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.batch-opa {
			position: fixed;
			bottom: 10px;
			right: 10px;
		}

		.batch-btn {
			background-color: $base-color;
			color: #fff;
		}

	}
	.scroll-popup{
		height: 300px;
	}
	.no-info{
		text-align: center;
		margin-top: 5px;
	}
</style>